<template>
  <div>
    <JcTitle name="作业指导书" icon></JcTitle>
    <div class="content">
      <div class="flex">
        <el-input ref="inputs" v-model="value" placeholder="请扫码" @keyup.enter.native="confirmNum"/>
        <el-button type="primary" @click="confirmNum">搜索</el-button>
      </div>
      <el-form ref="purchaseRef" :model="production" label-width="100px" disabled>
        <el-form-item label="生产车间">
          <el-input v-model.trim="production.fworkshop"/>
        </el-form-item>
        <el-form-item label="助记码">
          <el-input v-model.trim="production.fmodel"/>
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model.trim="production.fnumber"/>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model.trim="production.fname"/>
        </el-form-item>
        <el-form-item label="物料规格">
          <el-input v-model.trim="production.fspecificaTion"/>
        </el-form-item>
        <el-form-item label="物料描述">
          <el-input v-model.trim="production.fdescripTion"/>
        </el-form-item>
      </el-form>
      <div class="imgflex">
        <el-image
            v-for="(item, index) in imgArr" :key="index"
            :src="item.furl"
            :preview-src-list="imgList"
        ></el-image>
      </div>
    </div>
    <el-dialog
        title="请扫码"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        center
        :before-close="beforeClose">
      <div>
        <el-input
            ref="inpu"
            v-model="value"
            clearable
            placeholder="请扫描二维码"
            @keyup.enter.native="confirmNum"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmNum">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import JcTitle from "@/components/Title";
import {queryImgByCode, queryProcessDetails, queryProcessDetailsByGroup} from "@/api/zhuye";

export default {
  components: {
    JcTitle,
  },
  data() {
    return {
      value: '',
      code: '',
      production: {},
      imgArr: [],
      imgList: [],
      dialogVisible: false,
    }
  },
  created() {
    this.dialogVisible = true
    setTimeout(() => {
      this.$refs.inpu.focus()
    }, 100)
  },
  methods: {
    searchNum(code) {
      this.imgList = []
      queryImgByCode({code}).then(res => {
        if (res.code === 0) {
          this.imgArr = res.data
          this.imgArr.map(item => {
            item.furl = this.$img + item.furl
            this.imgList.push(item.furl)
          })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 详情
    confirmNum() {
      if (!this.value) return
      const DATA = {
        fid: this.value.split('UU')[0]
      }
      queryProcessDetails(DATA).then(res => {
        if (res.code === 0) {
          this.value = ''
          this.searchNum(res.data.fmodel)
          this.production = res.data
          this.dialogVisible = false
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    beforeClose() {
      if (!this.value) {
        this.$refs.inpu.focus()
        return
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  margin-top: 65px;
  padding: 10px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;

  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}

.imgflex {
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 200px;
    height: 200px;
    margin: 0 20px 20px 0;
  }
}
</style>
